<template>
  <div>
    <div class="feedback">
      <!-- 底部按钮 -->
      <footer class="footer-button">
        <mt-button @click.native="complete" :disabled="isDisabled">反馈</mt-button>
      </footer>
      <!-- 反馈 -->
      <div class="text">
        <p>若您遇到了无法解决的问题，请告诉我们！</p>
        <p>若您期待更好更有趣的功能，请告诉我们！</p>
        <p>若您有提高玩卡效率的方法，请告诉我们！</p>
        <p>若您反馈的意见很有价值，大大有奖！</p>
        <p>所以，来吧~来吧！</p>
      </div>
      <mt-field label="" placeholder="请描述您的问题，至少15个字" type="textarea" class="textarea" v-model="content"></mt-field>
      <div class="flex-block">
        <div class="img-add">
          <div class="h-line"></div>
          <div class="v-line"></div>
          <input type="file" name="file" @change="uploads" class="file-input">
        </div>
        <div class="image-back" v-for="v in imageList" :key="v">
          <img :src="v" @click="imgAlert(v)">
        </div>
        <div class="image-back" v-for="v in 3" :key="v"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import {MessageBox, Toast} from 'Mint-ui'

  export default {
    name: 'FeedBack',
    data () {
      return {
        content: '',
        imageList: []
      }
    },
    computed: {
      isDisabled () {
        return this.content === '' || this.content.length < 15
      }
    },
    methods: {
      uploads (event) {
        let file = event.target.files[0]
        let formdata = new FormData()
        formdata.append('file', file)
        formdata.append('type', 'feedback')
        this.$post('/vue/upload/index', formdata).then(data => {
          msg('上传成功')
          this.imageList.push(data)
        })
      },
      complete () {
        let params = {
          question: this.content,
          image: this.imageList
        }
        this.$post('/vue/setting/feedback', params).then(data => {
          msg('反馈成功')
          this.$router.go(-1)
        })
      },
      imgAlert (v) {
        MessageBox.alert(`<img src="${v}">`, '', {closeOnClickModal: true})
      }
    }
  }
  const msg = (msg) => {
    Toast({
      message: msg,
      position: 'bottom',
      duration: 2000
    })
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-blue: rgb(108, 184, 222);

  .feedback {
    padding: 12px;
    height: calc(~'100vh - 81px');
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: rgb(240, 244, 247);
    .text {
      font-size: 12px;
      line-height: 24px;
      color: @c-169;
      text-align: left;
    }
    .textarea {
      height: 24vh;
      margin: 8px 0;
      border-radius: 12px;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
      .mint-cell-wrapper {
        padding: 12px;
        .mint-cell-value {
          height: 100%;
          padding: 0;
          .mint-field-core {
            height: 100%;
            font-size: 12px;
            line-height: 24px;
            color: @c-blue;
            &::-webkit-input-placeholder {
              font-size: 12px;
              color: @c-169;
            }
          }
        }
      }
    }
    .flex-block {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      align-content: flex-start;
      justify-content: space-between;
      .image-back {
        width: 22vw;
        height: 22vw;
        flex: 0 0 auto;
        position: relative;
        margin-top: 12px;
        img {
          border-radius: 12px;
        }
      }
      .img-add {
        flex: 0 0 auto;
        margin-top: 12px;
        width: 22vw;
        height: 22vw;
        background-color: #FFF;
        border-radius: 12px;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
        position: relative;
        overflow: hidden;
        .h-line, .v-line {
          background-color: @c-226;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
        }
        .h-line {
          width: 3%;
          height: 50%;
          border-radius: 3%;
        }
        .v-line {
          width: 50%;
          height: 3%;
          border-radius: 3%;
        }
        .file-input {
          width: 100%;
          height: 100%;
          opacity: 0;
        }
      }
    }
    .footer-button {
      padding: 8px;
      border-top: 1px solid @c-226;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #FFF;
      img {
        width: 24px;
        height: 24px;
      }
      .mint-button {
        height: 40px;
        padding: 7px 0;
        width: 168px;
        text-align: center;
        background-color: @c-blue;
        border-radius: 20px;
        line-height: 0;
        .mint-button-icon {
          line-height: 0;
        }
        .mint-button-text {
          font-size: 13px;
          line-height: 24px;
          color: #FFF;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
</style>